﻿@{
    ViewBag.Title = "EmployeeHistory";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>EmployeeHistory</h2>

<script id="delete-confirmation" type="text/x-kendo-template">

    <p class="delete-message">“Are you sure you want to delete the records?”</p>

    <button class="delete-confirm k-button btn btn-default">Yes</button>

    <button class="delete-cancel  k-button btn btn-default">No</button>

</script>



<div id="EmployeeGrid"></div>
<div id="EmployeeProjectGrid"></div>



<div id="saveConfirm" class="collapse alert alert-success alert-dismissible" role="alert">
    <i class="pull-left fa fa-check-circle fa-2x"></i>
    <button type="button" class="close"><span aria-hidden="true">&times;</span></button>
    <span>Your changes have been sucessfully saved.
    </span>
</div>


@*<script type="text/javascript">
    var EmployeeGrid = EmployeeGrid || {};
    EmployeeGrid = function () {
        var gridInEditMode = false;
        var scratchDropDownChanged = false;
        var EmployeeGridDatasource = new kendo.data.DataSource({
            transport: {
                read: {                 
                    url: "/EmployeeGrid/GetEmployees",
                    type: "get",                 
                    dataType: 'json',
                },
                create: {
                    //alert(1);
                    //debugger;
                    //var EmployeeGridVM = new Object();
                    //EmployeeGridVM.id = options.data.id;
                    //if (options.data.contactId)
                    //    EmployeeGridVM.contactId = options.data.contactId.id;

                    //if (options.data.department)
                    //    EmployeeGridVM.department = options.data.department.id;
                    //EmployeeGridVM.hireDate = options.data.hireDate;
                    //EmployeeGridVM.terminationDate = options.data.terminationDate;
                    //EmployeeGridVM.salary = options.data.salary;

                    //EmployeeGridVM.notes = options.data.notes;

                    //$.ajax({
                  
                        type: "POST",
                        url: "/EmployeeGrid/CreateEmployee",
                        contentType: "application/json",
                        dataType: 'json'
                       // data: JSON.stringify(EmployeeGridVM),
                        //success: function (data) {
                        //    if (data.Message) {
                        //        alert(data.Message);
                        //    }
                        //    options.success(data);
                        //},
                        //error: function (request, status, error) {
                        //    debugger;
                        //    alert(request.responseText);
                        //}
                   
                },
                update: function (options) {
                    alert(1);
                    debugger;
                    var EmployeeGridVM = new Object();
                    EmployeeGridVM.id = options.data.id;                   
                        EmployeeGridVM.contactId = options.data.contactId.id;                    
                        EmployeeGridVM.department = options.data.department.id;
                    EmployeeGridVM.hireDate = options.data.hireDate;
                    EmployeeGridVM.terminationDate = options.data.terminationDate;
                    EmployeeGridVM.salary = options.data.salary;

                    $.ajax({
                        type: "POST",
                        url: "/EmployeeGrid/UpdateEmployee",
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        data: JSON.stringify(EmployeeGridVM),
                        success: function (data) {
                            if (data.Message) {
                                alert(data.Message);
                            }
                            options.success(data);
                        },
                        error: function (request, status, error) {
                            debugger;
                            alert(request.responseText);
                        }
                    });
                  
                },
                destroy: function (options) {
                    $.ajax({
                        type: "POST",
                        url: "../EmployeeGrid/DeleteEmployee",
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        data: JSON.stringify({ id: options.data.id }),

                        success: function (data) {

                            options.success(data);
                        },
                        error: function (request, status, error) {
                            debugger;
                            alert(request.responseText);
                        }
                    });
                },
               
                parameterMap: function (options) {
                    return kendo.stringify(options); // kendo.stringify serializes to JSON string
                }

    },
   

            pageSize: 5,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: {
                            editable: false, nullable: true,
                            type: "int"
                        },
                        hireDate: {
                            type: "date",
                            //  validation: { required: true },
                            nullable: true,
                            value: "",
                            defaultOption: null
                        },
                        terminationDate: {
                            type: "date",
                            //  validation: { required: true },
                            nullable: true,
                            value: "",
                            defaultOption: null
                        },

                        contactId: {
                            type: "int"
                           // defaultValue: contactId
                        },

                        department: {
                            type: "int"
                        },

                        departmentId: {
                            type: "int"
                        },

                        salary: {
                            type: "int"
                        },

                        cName: {
                            type: "string"
                        },
                        depname: {
                            type: "string"
                        },

                        notes:
                            {
                                type: "string"
                            },


                        skills:
                           {
                               type: "string"
                           },

                        error: function (a) {
                            debugger;
                            $('#EmployeeGrid').data("kendoGrid").cancelChanges();
                        },

                    }
                }
            }

        });


        var allContactsforEmployeedatasource = new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    $.ajax({
                        type: "GET",
                        url: "../CommunicationMessageGrid/GetAllContacts",
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        success: function (data) {
                            options.success(data);
                        }
                    });
                }
            }
        });
        var departmentdataSource = new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    $.ajax({
                        type: "GET",

                        url: "../ProductRequestGrid/GetDepartments",
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        data: JSON.stringify({ key: "value" }),
                        success: function (data) {
                            options.success(data);
                        }
                    });
                }
            }
        });

        return {
            EmployeeGridDatasource: EmployeeGridDatasource,
            gridInEditMode: gridInEditMode,
            allContactsforEmployeedatasource: allContactsforEmployeedatasource,
            departmentdataSource: departmentdataSource,

            scratchDropDownChanged: scratchDropDownChanged
        }
    }();

    $(function () {

        $(window).on("beforeunload", function () {

            if (EmployeeGrid.gridInEditMode) {
                return "Are you sure you want to discard all your changes."
            }

        });

        function dateTimeEditor(container, options) {
            $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
            .appendTo(container)
            .kendoDateTimePicker({});
        }
        $("#EmployeeGrid").kendoGrid({
            dataSource: EmployeeGrid.EmployeeGridDatasource,
            scrollable: true,
            height: "250px",
            toolbar: [{ name: "create", text: "Add an Emoloyee" }, "excel"], //, "save", "cancel"],
            excel: {
                fileName: "EmployeeExport.xlsx"
            },
            pageable: true,
            height: 300,

            columns: [            
                 { title: "projects", filterable: false, width: "8em", template: "<a onclick=\"showEmployeeProjects('#=id #',this);\"style=\"cursor: pointer;\"> View</a>" },
  { field: "cName", title: "AllContacts *", filterable: false, width: "8em", editor: allcontactsDropdownEditor, editable: true },


            {
                field: "hireDate", title: " Hire Date *", width: "10em", filterable: false, format: "{0:MM/dd/yyyy HH:mm tt}",
                editor: dateTimeEditor,
                filterable: {
                    ui: "datetimepicker"
                }
            },

              {
                  field: "terminationDate", title: " Termination Date", width: "10em", filterable: false, format: "{0:MM/dd/yyyy HH:mm tt}",
                  editor: dateTimeEditor,
                  filterable: {
                      ui: "datetimepicker"
                  }
              },
     { field: "departmentId", title: "Department *", hidden: true, editor: departmentDropDownEditor, filterable: false, width: "10em" },
             { field: "salary", title: "Salary", filterable: true, width: "8em" },



            { field: "skills", title: "Skills", filterable: true, width: "8em" },

               { field: "notes", title: "Notes", filterable: true, width: "8em" },

          {
              title: "&nbsp;",
              width: "25em",
              //command: ["edit", "destroy"]
              command: [

                  "edit",
                  {
                      name: "Delete",


                      click: function (e) {

                          var tr = $(e.target).closest("tr"); //get the row for deletion
                          var dataItem = this.dataItem(tr); //get the row data so it can be referred later
                          //see what is coming in dataItem
                          //if (dataItem > 0) {
                          //    $("#delValidation").addClass('in')
                          //}
                          //else {

                          deleteTopicConfirmation(e, this);
                          ////}
                          return false;
                      }
                  }
              ]
          }
            ],
            filterable: {
                extra: false,
                operators: {
                    string: {
                        eq: "Is equal to",
                        neq: "Is not equal to",
                        contains: "Contains"
                    }
                }
            },

            editable: "popup",
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            selectable: true,

            cancel: function () {
                EmployeeGrid.gridInEditMode = false;
            },
            excelExport: function (e) {
                for (var i = 0; i < e.workbook.sheets[0].columns.length; i++) {
                    e.workbook.sheets[0].columns[i].autoWidth = true;
                }
            }
        });

        EmployeeGrid.EmployeeGridDatasource.bind("requestEnd", showSuccessMessage);


        function showSuccessMessage(e) {
            if (e.type === "update" || e.type === "create") {
                EmployeeGrid.gridInEditMode = false;
                $("#saveConfirm").addClass('in');
                e.sender.read();
            }
        }


        $(".close").click(function () {
            $(this).parent().removeClass('in');
        });
        function deleteTopicConfirmation(e, widget) {
            var grid = $('#EmployeeGrid').data("kendoGrid");
            deleteConfirmation(e, widget, grid);
        }

        function deleteConfirmation(e, widget, grid) {

            var currentRow = $(e.target).closest("tr"); //get the row for deletion

            var currentRowData = widget.dataItem(currentRow); //get the row data so it can be  referred later

            var kendoWindow = $("<div />").kendoWindow({

                title: "Confirmation",
                resizable: true,
                modal: true,
                width: "400px"
            });

            kendoWindow.data("kendoWindow")

                .content($("#delete-confirmation").html())

                .center().open();

            kendoWindow

                .find(".delete-confirm,.delete-cancel")
                .click(function () {
                    if ($(this).hasClass("delete-confirm")) {

                        grid.dataSource.remove(currentRowData);

                        grid.dataSource.sync();

                    }

                    $(this).closest("[data-role=window]").kendoWindow("close");

                });

        }

        function allcontactsDropdownEditor(container, options) {
            $('<input data-text-field="contactname"  data-value-field="id"   data-bind="value:contactId" style="width:150px;"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: true,
                    dataValueField: "id",
                    dataTextField: "contactname",
                    dataSource: EmployeeGrid.allContactsforEmployeedatasource,
                });
        }
        function departmentDropDownEditor(container, options) {
            $('<input id="departmentId" data-text-field="depCode" data-value-field="departmentId" data-bind="value:departmentId"/>').appendTo(container).kendoDropDownList({
                autoBind: true,
                dataValueField: "departmentId",
                dataTextField: "depCode",
                dataSource: EmployeeGrid.departmentdataSource

            });
        }



    });
</script>*@
 
<script type="text/javascript">

    function showEmployeeProjects(contactId,e) {
        debugger;
       
        alert(contactId);
        $('#EmployeeGrid tr.k-state-selected').removeClass('k-state-selected');
        var row = $(e).closest("tr");
        row.addClass("k-state-selected");
       
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    $.ajax({
                        type: "POST",
                        url: "../EmployeeGrid/GetEmployeesProjects",
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        data: JSON.stringify({ id: contactId }),

                        success: function (data) {

                            options.success(data);
                        },

                        error: function (request, status, error) {

                            alert(request.responseText);
                        }
                    });
                },
                destroy: function (options) {
                    $.ajax({
                        type: "POST",
                        url: "../CompanyHistory/DeleteHistory",
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        data: JSON.stringify({ id: companyId }),

                        success: function (data) {

                            options.success(data);
                        }
                    });
                },
                parameterMap: function (options) {
                    return kendo.stringify(options); // kendo.stringify serializes to JSON string
                },

            },
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: {
                            editable: false, nullable: true,
                            type: "int"
                        },
                       
                        projectname:
                            {
                                type: "string"
                            },
                        statusName:
                            {
                                type:"string"
                            },
                        notes:
                            {
                                type:"string"
                            },
                       
                        error: function (a) {

                            $('#EmployeeProjectGrid').data("kendoGrid").cancelChanges();
                        },

                    }
                }
            }

        });

        function dateTimeEditor(container, options) {
            $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '" />')
            .appendTo(container)
            .kendoDateTimePicker({});
        }

        $("#EmployeeProjectGrid").kendoGrid({
            dataSource: dataSource,
            scrollable: true,
            height: "250px",
            toolbar: ["excel"], //, "save", "cancel"],
            excel: {
                fileName: "EmployeeProjectExport.xlsx"
            },
            pageable: true,
            height: 300,
            columns: [
        
          { field: "projectname", title: "Project", filterable: false, width: "8em" },
          { field: "statusName", title: "Status", width: "8em" },
            { field: "notes", title: "Notes", width: "8em" },
          

          {
              title: "&nbsp;",
              width: "25em",
            
          }
            ],
            filterable: {
                extra: false,
                operators: {
                    string: {
                        eq: "Is equal to",
                        neq: "Is not equal to",
                        contains: "Contains"
                    }
                }
            },

            editable: "popup",
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            selectable: true,
            // change: onTopicChange,
            // dataBound: onTopicsGridDataBound,

            cancel: function () {
              gridInEditMode = false;
            }
        });           
 }
    </script>

<script type="text/javascript" src="~/Scripts/CallCenter/EmployeeGrid.js"></script>

